<template>
  <div class="f-columnY container">
    <el-form 
      :inline="true" 
      :model="formInline" 
      ref="header"
      class="f-flex header"
      label-width="100px"
      size="small">
      <el-form-item label="导入位置:">
        <tree-select ref="treeSelect"
          :data="officeTreeList"
          :el="'formInline.deptId'"
          placeholder="请选择导入位置"
          :defaultProps="defaultProps"
          :default-expand-all="false"
          @parent-event="popoverHide"
          multiple
          clearable
          :clear="clearTreeSelect"
          :nodeKey="nodeKey"
          :checkedKeys="defaultCheckedKeys"
          @popoverHide="popoverHide">
        </tree-select>
      </el-form-item>

      <el-upload
        class="upload-demo"
        style="margin-left: 40px;"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button  slot="trigger" size="small" type="primary">上传地图文件</el-button>
        <el-button style="margin-left: 20px;" size="small" type="success" @click="submitUpload">导入地图</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500MB</div>
      </el-upload>
    </el-form>
    <div class="f-flex1 f-flex content">
      <div class="f-flex1 map">
        
      </div>
      <div class="tree">
        <el-tree :data="officeTreeList" :props="defaultProps"></el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import TreeSelect from '@/components/TreeSelect'
export default {
  components: {
    TreeSelect
  },
  data() {
    return {
      fileList: [
        {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
      formInline: {
        deptId: []
      },
      defaultProps: {
        parent: 'parentId',   // 父级唯一标识
        value: 'id',          // 唯一标识
        label: 'label',       // 标签显示
        children: 'children', // 子级
      },
      isShowSelect: false,//选择面板，默认隐藏
      officeTreeList: this.$config.treeList,//树形结构数据
      selectedOfficeIds: '',//选择后返回的选中id，以逗号拼接
      selectedOffices: [],//选择后返回的选中对象，
      clearTreeSelect: 0,
      nodeKey: "id",//树形结构数据中对应的属性名称，可改为自己数据中属性
      defaultCheckedKeys: [],//默认初次选中的数据
    }
  },
  methods: {
    popoverHide (checkedIds, checkedData, el) {
      if (el) {
        eval( ' ( this.' + el +' = checkedIds) ' )
      }
    },
    submitUpload() {
      if (!this.formInline.deptId.length) {
        this.$message.warning('请选择导入位置')
        return
      }
      console.log(999,this.fileList)
      if (!this.fileList.length) {
        this.$message.warning('请上传地图文件')
        return
      }
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>


<style lang="scss" scoped>
@import '~styles/mixin.scss';
.container {
  height: 100%;
  .header {
    padding-top: 16px;
  }
  .content {
    padding: 10px 10px;
    .map {
      margin: 0 10px;
      background: url('~images/bg_images/login.jpg') no-repeat center center;
      background-size: contain;
      border: 1px solid #ebeef5;
      box-shadow: 0px 0px 8px #ebeef5;
      @include transition(all, 1s);
    }
    .tree {
      width: 300px;
    }
  }
}
</style>

